<!--
 * 介绍:CstateTag标签
-->
<script lang="ts" setup name="CstateTag">
import type { CstateTagEmun, CstateTagEmunItem } from "./index";
const className = {
  bg: "CstateTag__bg",
  text: "CstateTag__text",
};

const props = withDefaults(
  defineProps<{
    enum?: CstateTagEmun;
    value?: string | number;
    mode?: keyof typeof className;
    radius?: string;
  }>(),
  {
    mode: "bg",
    radius: "9999px",
  }
);
const current = computed<CstateTagEmunItem | undefined>(() => {
  if (!props.enum) return;
  for (const val of props.enum) {
    if (val.value == props.value) return val;
  }
  return { text: "----", value: "----" } as CstateTagEmunItem;
});
</script>

<template>
  <span
    :style="[
      {
        '--CstateTag-color':
          current?.color || (mode === 'text' ? 'var(--C-white)' : 'inherit'),
        '--CstateTag-bg': current?.bg || 'var(--C-M1)',
        borderRadius: props.radius,
      },
      current?.style || '',
    ]"
    :class="[className[props.mode || 'bg'], current?.class]"
    class="CstateTag"
  >
    <slot :="{ ...current }"> {{ current?.text }} </slot>
  </span>
</template>

<style lang="scss" scoped>
.CstateTag {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--T-S-sm);
}
.CstateTag__bg {
  color: var(--CstateTag-color);
  border-radius: 999rem;
  text-align: center;
  background-color: var(--CstateTag-bg);
  padding: 0.3em 1em;
}
.CstateTag__text {
  text-align: center;
  color: var(--CstateTag-color);
}
</style>
